<template>
    <div>
        <!-- banner -->
        <Swipe-banner :banner="banner" @change="handleChange"></Swipe-banner>
        <!-- grid九宫格. -->
        <div>
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link :to='"/home/newList/" + id'>
                        <span class="mui-icon mui-icon-home"></span>
                        <div class="mui-media-body">Home</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/home/scroll'>
                        <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                        <div class="mui-media-body">Email</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/'>
                        <span class="mui-icon mui-icon-chatbubble"></span>
                        <div class="mui-media-body">Chat</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/'>
                        <span class="mui-icon mui-icon-location"></span>
                        <div class="mui-media-body">location</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/'>
                        <span class="mui-icon mui-icon-search"></span>
                        <div class="mui-media-body">Search</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/'>
                        <span class="mui-icon mui-icon-phone"></span>
                        <div class="mui-media-body">Phone</div></router-link></li>
                
            </ul>
        </div>
    </div>
</template>

<script>

import Banner from './_banner.vue';
export default {
  data() {
    return {
      banner: "",
      id: 2
    };
  },
  created() {
    //
    this.getList();
  },
  methods: {
    getList() {
      this.axios
        .post("/api/recommend/Recommend/recommend", {
          page: 1
        })
        .then(res => {
          console.log(res);
          this.banner = res.data.course;
        });
    },
    handleChange(index) {
      console.log(index);
    }
  },
  components: {
    "Swipe-banner": Banner
  }
};
</script>

<style lang='scss' >
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    img {
        width: 100%;
        height: 100%;
    }
    &:nth-child(1) {
      background: lightblue;
    }
    &:nth-child(2) {
      background: lightgray;
    }
    &:nth-child(3) {
      background: lightgreen;
    }
  }
}
</style>